<template>
  <div>
    <div style="height: calc(100vh)">
      <Relation-graph
        ref="graphRef"
        :options="graphOptions"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import RelationGraph from "relation-graph/vue3";
const options = {
  defaultExpandHolderPosition: "right",
};
const jsonData = {
  rootId: "a",
  nodes: [
    { id: "a", text: "a" },
    { id: "b", text: "b" },
    { id: "c", text: "c" },
    { id: "d", text: "d" },
    { id: "e", text: "e" },
    { id: "f", text: "f" },
  ],
  lines: [
    { from: "a", to: "b" },
    { from: "a", to: "c" },
    { from: "a", to: "d" },
    { from: "a", to: "e" },
    { from: "a", to: "f" },
  ],
};
const graphRef = ref(null);

onMounted(() => {
  graphRef.value.setJsonData(jsonData);
});
</script>

<style lang="scss" scoped>
.my-node-style {
  background-color: #00ced1 !important; /** 通过自定义样式设置节点颜色需要加 !important **/
}

.my-node-style:hover {
  background-color: #ff0000 !important;
}

@keyframes myFlash {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes myFlash {
  from {
    opacity: 1;
  }
  20% {
    opacity: 0.1;
  }
  60% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.my-node-flash-style {
  animation: myFlash 600ms infinite;
  -webkit-animation: myFlash 2000ms infinite;
}
</style>
